<script setup>
import { useUserStore } from '@/stores/user';
import JWeixin from 'weixin-js-sdk';
import { Toast } from 'vant';
import { getQuery } from 'ufo';
import { queryUrlParam } from '@/utils/tools';
import service_wx from '@/api/service_wx';

import { EiBlock, EiInfo } from '@eplat/ei';
// 调用4j的service
import api4j from '@/api/example';

const router = useRouter();
const user = useUserStore();
// 开关
const switchs = ref(true);
const loading = ref(false);
const finish = ref(false);
const onLoad = async () => {
  loading.value = true;
  loading.value = false;
};

// 授权
JWeixin.config({
  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: api4j.APPID1, // 必填，公众号的唯一标识
  timestamp: '', // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '', // 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});
JWeixin.ready(async () => {
  // 获取用户code
  const code = queryUrlParam('code');
  // 没有授权code
  if (code == null) {
    // Toast('授权失败');
    // 跳转到授权页面
    window.location.href =
      'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
      api4j.APPID1 +
      '&redirect_uri=https%3A%2F%2F' +
      api4j.SERVER_DOMAIN1 +
      '%2F%23%2FWX%2FWD%2FWXWD12&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect&forcePopup=true';
  } else {
    // 本地没有token新授权
    if (user.getToken == '' || user.getToken == undefined) {
      // Toast('正在授权');
      const postEiInfo = new EiInfo();
      postEiInfo.set('code', code);
      // 通过code获取用户信息
      await api4j.wxLogins(postEiInfo).then((res) => {
        // 如果授权无效 重新授权
        if (res.status !== 1) {
          // Toast(res.msg)
          window.location.href =
            'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
            api4j.APPID1 +
            '&redirect_uri=https%3A%2F%2F' +
            api4j.SERVER_DOMAIN1 +
            '%2F%23%2FWX%2FWD%2FWXWD12&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect&forcePopup=true';
          return;
        }
        // Toast(res.msg);
        // token info存放本地
        user.setUserInfo(
          res.extAttr.token,
          res.extAttr.userInfo.attrs.headimgurl,
          res.extAttr.userInfo.attrs.nickname
        );
        user.setUserNameTel(res.extAttr.username, res.extAttr.phone);

        onLoad();
      });
    }
  }
});

const gozd = async () => {
  if (
    user.getUsername == undefined ||
    user.getUsername.trim().length == 0 ||
    user.getPhone.trim().length == 0
  ) {
    Toast('请完善我的信息');
    return;
  }
  router.push('/WX/WD/WXWD14');
};
const gosdzd = async () => {
  if (
    user.getUsername == undefined ||
    user.getUsername.trim().length == 0 ||
    user.getPhone.trim().length == 0
  ) {
    Toast('请完善我的信息');
    return;
  }
  router.push('/WX/WD/WXWD142');
};

const gojf = async () => {
  if (
    user.getUsername == undefined ||
    user.getUsername.trim().length == 0 ||
    user.getPhone.trim().length == 0
  ) {
    Toast('请完善我的信息');
    return;
  }
  router.push('/WX/WD/WXWD17');
};

const gozc = async () => {
  if (
    user.getUsername == undefined ||
    user.getUsername.trim().length == 0 ||
    user.getPhone.trim().length == 0
  ) {
    Toast('请完善我的信息');
    return;
  }
  router.push('/WX/WD/WXWD15');
};

// 租金
const gozjzc = async () => {
  if (
    user.getUsername == undefined ||
    user.getUsername.trim().length == 0 ||
    user.getPhone.trim().length == 0
  ) {
    Toast('请完善我的信息');
    return;
  }
  // Toast('待开放~');
  // return;
  router.push('/WX/WD/WXWD19');
};

const gozjzd = async () => {
  if (
    user.getUsername == undefined ||
    user.getUsername.trim().length == 0 ||
    user.getPhone.trim().length == 0
  ) {
    Toast('请完善我的信息');
    return;
  }
  // Toast('待开放~');
  // return;
  router.push('/WX/WD/WXWD20');
};

const gozjjl = async () => {
  if (
    user.getUsername == undefined ||
    user.getUsername.trim().length == 0 ||
    user.getPhone.trim().length == 0
  ) {
    Toast('请完善我的信息');
    return;
  }
  // Toast('待开放~');
  // return;
  router.push('/WX/WD/WXWD21');
};

const updateInfo = async () => {
  router.push('/WX/WD/WXWD16');
};
</script>
<template>
  <van-list
    v-model:loading="loading"
    class="working-list"
    :finished="finish"
    finished-text=""
    @load="onLoad"
  >
    <div style="background: #4b75e5; height: 198px; color: white">
      <div style="font-size: 20px; padding: 20px; text-align: center">个人中心</div>
      <div style="display: flex">
        <div style="margin-left: 30px; display: inline-block">
          <van-image
            round
            width="5rem"
            height="5rem"
            :src="user.getHeadimgurl"
            style="border-radius: 10px; display: block"
          />
        </div>
        <div
          style="
            display: inline-block;
            margin-left: 20px;
            vertical-align: top;
            margin-top: 5px;
            width: 30%;
            font-size: 15px;
          "
        >
          {{
            user.getUsername == undefined || user.getUsername.trim().length == 0
              ? '游客（未绑定）'
              : user.getUsername.trim()
          }}
          <br />
          <br />
          {{
            user.getPhone == undefined || user.getPhone.trim().length == 0
              ? ''
              : user.getPhone.trim().replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
          }}
        </div>
        <div style="display: flex; margin-left: 10%" @click="updateInfo()">
          <div style="display: inline-block; margin-top: 20px">我的信息</div>
          <div>
            <img src="@/assets/tb97.svg" style="width: 30px; height: 30px; margin-top: 15px" />
          </div>
        </div>
      </div>
    </div>

    <!--    <div-->
    <!--      style="-->
    <!--        background: #ffffff;-->
    <!--        height: 100px;-->
    <!--        margin-top: -40px;-->
    <!--        margin-right: 15px;-->
    <!--        margin-left: 15px;-->
    <!--        border-radius: 10px 10px 0 0;-->
    <!--        border: 1px solid white;-->
    <!--        display: flex;-->
    <!--        justify-content: space-around;-->
    <!--        align-items: center;-->
    <!--      "-->
    <!--    >-->
    <!--      <van-button-->
    <!--        style="-->
    <!--          font-weight: bold;-->
    <!--          flex: 1;-->
    <!--          padding: 10px;-->
    <!--          border-radius: 5px;-->
    <!--          background-color: white;-->
    <!--          color: black;-->
    <!--          display: flex;-->
    <!--          flex-direction: column;-->
    <!--          align-items: center;-->
    <!--          width: 100%;-->
    <!--          height: 100%;-->
    <!--          border: 1px solid white;-->
    <!--        "-->
    <!--        @click="gozc()"-->
    <!--      >-->
    <!--        <img src="@/assets/tb138.svg" style="width: 50%; height: 50%; margin-bottom: 5px" />-->
    <!--        <br />-->
    <!--        <span style="font-size: 13px">资产绑定</span>-->
    <!--      </van-button>-->

    <!--      <van-button-->
    <!--        style="-->
    <!--          font-weight: bold;-->
    <!--          flex: 1;-->
    <!--          padding: 10px;-->
    <!--          border-radius: 5px;-->
    <!--          background-color: white;-->
    <!--          color: black;-->
    <!--          display: flex;-->
    <!--          flex-direction: column;-->
    <!--          align-items: center;-->
    <!--          width: 100%;-->
    <!--          height: 100%;-->
    <!--          border: 1px solid white;-->
    <!--        "-->
    <!--        @click="gozd()"-->
    <!--      >-->
    <!--        <img src="@/assets/tb139.svg" style="width: 50%; height: 50%; margin-bottom: 5px" />-->
    <!--        <br />-->
    <!--        <span style="font-size: 13px">物业账单</span>-->
    <!--      </van-button>-->
    <!--      <van-button-->
    <!--        style="-->
    <!--          font-weight: bold;-->
    <!--          flex: 1;-->
    <!--          padding: 10px;-->
    <!--          border-radius: 5px;-->
    <!--          background-color: white;-->
    <!--          color: black;-->
    <!--          display: flex;-->
    <!--          flex-direction: column;-->
    <!--          align-items: center;-->
    <!--          width: 100%;-->
    <!--          height: 100%;-->
    <!--          border: 1px solid white;-->
    <!--        "-->
    <!--        @click="gosdzd()"-->
    <!--      >-->
    <!--        <img src="@/assets/tb139.svg" style="width: 50%; height: 50%; margin-bottom: 5px" />-->
    <!--        <br />-->
    <!--        <span style="font-size: 13px">水电账单</span>-->
    <!--      </van-button>-->
    <!--      <van-button-->
    <!--        style="-->
    <!--          font-weight: bold;-->
    <!--          flex: 1;-->
    <!--          padding: 10px;-->
    <!--          border-radius: 5px;-->
    <!--          background-color: white;-->
    <!--          color: black;-->
    <!--          display: flex;-->
    <!--          flex-direction: column;-->
    <!--          align-items: center;-->
    <!--          width: 100%;-->
    <!--          height: 100%;-->
    <!--          border: 1px solid white;-->
    <!--        "-->
    <!--        @click="gojf()"-->
    <!--      >-->
    <!--        <img src="@/assets/tb333.svg" style="width: 50%; height: 50%; margin-bottom: 5px" />-->
    <!--        <br />-->
    <!--        <span style="font-size: 13px">缴费记录</span>-->
    <!--      </van-button>-->
    <!--    </div>-->

    <div
      style="
        background: #ffffff;
        height: 100px;
        margin-top: -40px;
        margin-right: 15px;
        margin-left: 15px;
        border-radius: 10px 10px 0 0;
        border: 1px solid white;
        display: flex;
        justify-content: space-around;
        align-items: center;
      "
    >
      <van-button
        style="
          font-weight: bold;
          flex: 1;
          padding: 10px;
          border-radius: 5px;
          background-color: white;
          color: black;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          height: 100%;
          border: 1px solid white;
        "
        @click="gozc()"
      >
        <img src="@/assets/tb138.svg" style="width: 50%; height: 50%; margin-bottom: 5px" alt="" />
        <br />
        <span style="font-size: 13px">资产绑定</span>
      </van-button>

      <van-button
        style="
          font-weight: bold;
          flex: 1;
          padding: 10px;
          border-radius: 5px;
          background-color: white;
          color: black;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          height: 100%;
          border: 1px solid white;
        "
        @click="gozd()"
      >
        <img src="@/assets/tb139.svg" style="width: 50%; height: 50%; margin-bottom: 5px" alt="" />
        <br />
        <span style="font-size: 13px">物业账单</span>
      </van-button>
      <van-button
        style="
          font-weight: bold;
          flex: 1;
          padding: 10px;
          border-radius: 5px;
          background-color: white;
          color: black;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          height: 100%;
          border: 1px solid white;
        "
        @click="gosdzd()"
      >
        <img src="@/assets/tb139.svg" style="width: 50%; height: 50%; margin-bottom: 5px" alt="" />
        <br />
        <span style="font-size: 13px">水电账单</span>
      </van-button>
      <van-button
        style="
          font-weight: bold;
          flex: 1;
          padding: 10px;
          border-radius: 5px;
          background-color: white;
          color: black;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          height: 100%;
          border: 1px solid white;
        "
        @click="gojf()"
      >
        <img src="@/assets/tb333.svg" style="width: 50%; height: 50%; margin-bottom: 5px" alt="" />
        <br />
        <span style="font-size: 13px">缴费记录</span>
      </van-button>
    </div>

    <div
      style="
        background: #ffffff;
        height: 100px;

        margin-right: 15px;
        margin-left: 15px;
        border-radius: 0 0 10px 10px;
        border: 1px solid white;
        display: flex;
        justify-content: space-around;
        align-items: center;
      "
    >
      <van-button
        style="
          font-weight: bold;
          flex: 1;
          padding: 10px;
          border-radius: 5px;
          background-color: white;
          color: black;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          height: 100%;
          border: 1px solid white;
        "
        @click="gozjzc()"
      >
        <img src="@/assets/tb329.svg" style="width: 50%; height: 50%; margin-bottom: 5px" alt="" />
        <br />
        <span style="font-size: 13px">租金资产</span>
      </van-button>

      <van-button
        style="
          font-weight: bold;
          flex: 1;
          padding: 10px;
          border-radius: 5px;
          background-color: white;
          color: black;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          height: 100%;
          border: 1px solid white;
        "
        @click="gozjzd()"
      >
        <img src="@/assets/tb326.svg" style="width: 50%; height: 50%; margin-bottom: 5px" alt="" />
        <br />
        <span style="font-size: 13px">租金账单</span>
      </van-button>
      <van-button
        style="
          font-weight: bold;
          flex: 1;
          padding: 10px;
          border-radius: 5px;
          background-color: white;
          color: black;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          height: 100%;
          border: 1px solid white;
        "
        @click="gozjjl()"
      >
        <img src="@/assets/tb332.svg" style="width: 50%; height: 50%; margin-bottom: 5px" alt="" />
        <br />
        <span style="font-size: 13px">租金记录</span>
      </van-button>

      <van-button
        style="
          font-weight: bold;
          flex: 1;
          padding: 10px;
          border-radius: 5px;
          background-color: white;
          color: black;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          height: 100%;
          border: 1px solid white;
          opacity: 0;
          pointer-events: none;
        "
        @click="gojf()"
      >
        <img src="@/assets/tb333.svg" style="width: 50%; height: 50%; margin-bottom: 5px" alt="" />
        <br />
        <span style="font-size: 13px">物业记录</span>
      </van-button>
    </div>
  </van-list>
</template>

<style lang="stylus" scoped>
.page-main

  .working-list
    .item1
      padding-top 0px
      padding-bottom 0px
    .title1
      color #003586
      font-weight bolder
      font-size 13px
    .titles
      color #161718
      font-weight bolder
      font-size 13px
    .titless
      color #161718
      font-weight bolder
      font-size 17px
    .title2
      color #808080
      font-size 13px
    padding 4px
    margin-bottom 48px
    .van-tag
      margin-left 5px
      font-size 12px
      padding 5px
    .btn1
      background-color #038008
      border-radius 5px
      margin-left 5px
    .btn0
      background-color #ff8d1a
      border-radius 5px
      margin-left 5px
    .class1
      background-color #99bcf1
      border-radius 5px
    .class2
      background-color #f19999
      border-radius 5px
    .class3
      background-color #99a6f1
      border-radius 5px
    .card-item
      margin 8px
      background-color white

      .item-value
        display flex
        justify-content space-between
        overflow hidden
        text-overflow ellipsis
        word-break keep-all
        white-space nowrap
        background-color transparent
        .group1
          display flex
          flex-direction row
          justify-content space-between

  .bottom-buttons
    position fixed
    bottom 12px
    left auto
    width 100%
    max-width var(--max-width)
</style>
